<template>
  <div class="FormContainer">
    <h3>展示表单组件</h3>
    <Form ref="formInline" :model="formData" :rules="ruleInline">
    <!-- Row line 1 -->
    <Row :gutter="30">
        <Col :span="8">
        <FormItem label="SourceName:" prop="sourceName">
            <Input type="text" v-model="formData.sourceName" placeholder="DataSourceName"></Input>
        </FormItem>
        </Col>
        <Col :span="8">
        <FormItem label="description:" prop="description">
            <Input type="text" v-model="formData.description" placeholder="description"></Input>
        </FormItem>
        </Col>
        <Col :span="8">
        <FormItem label="type:">
            <Select v-model="formData.type" default-label="MQTT">
            <Option v-for="(item,index) in SelectData" :key="index" :label="item" :value="item" >{{ item }}</Option>
            </Select>
        </FormItem>
        </Col>
     </Row>
      <!-- Row line 2 -->
     <Row :gutter="30">
        <Col :span="8">
        <FormItem label="Host:" prop="host">
            <Input type="text" v-model="formData.host" placeholder="Host"></Input>
        </FormItem>
        </Col>
        <Col :span="8">
        <FormItem label="Port:" prop="port">
            <Input type="text" v-model="formData.port" placeholder="Port"></Input>
        </FormItem>
        </Col>
        <Col :span="8">
        <FormItem label="SourceLocation:" prop="sourceLocation">
            <Input type="text" v-model="formData.sourceLocation" placeholder="SourceLocation"></Input>
        </FormItem>
        </Col>
     </Row>
    </Form>
    <div class="btn_Container">
      <div>
        <Button type="primary" @click="handleCancel">Cancel</Button>
      </div>
      <div>
        <Button type="primary"  @click="handleConfirm">Confirm</Button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
props:{
    formData:Object,
    SelectData:Array,
},
  data() {
    return {
        ruleInline:{
            sourceName:[{required:true,message:"*",trigger:"blur"}],
            description:[{required:true,message:"*",trigger:"blur"}],
            type:[{required:true,message:"*",trigger:"blur"}],
            host:[{required:true,message:"*",trigger:"blur"}],
            port:[{required:true,message:"*",trigger:"blur"}],
            sourceLocation:[{required:true,message:"*",trigger:"blur"}],
        },
    }
  },
  methods:{
    handleCancel(){
        this.$emit('Cancel')
    },
    handleConfirm(){
        this.$refs.formInline.validate((vali)=>{
            if(vali){
                this.$emit('Confirm',this.formData)
            }else{
                this.$Message.error("error")
            }
        })
        
    },
  },
}
</script>
<style lang="less" scoped>
.FormContainer {
    width: 100%;
    border: 1px dashed #5c6270;
    text-align: center;
    box-sizing: border-box;
    padding: 20px;
    .btn_Container{
        margin: 0 auto;
        width: 300px;
        justify-content: space-between;
        display: flex;
  }
}
</style>
